<template>
  <view>
    <!-- 2.0.19支持autoBack，默认为false -->
    <u-navbar title="活动报名" :safeAreaInsetTop="true" :placeholder="true" fixed :titleStyle="{fontSize: '28rpx'}" bgColor="#f2f2f2" :autoBack="true">
    </u-navbar>

    <view class="content">
      <view class="picture">
        <image src="https://bm.huizeqifu.com/upload/image/20240517/f703c2980e7f374a41202642f1803fbb.png" mode="scaleToFill" />
      </view>
      <view class="information">
        <u--form labelPosition="top">
          <u-form-item label="参会姓名" prop="name" labelWidth="95" borderBottom>
            <u--input v-model="userInfo.name" placeholder="请输入参会姓名" border="none"></u--input>
          </u-form-item>
          <u-form-item label="联系方式" prop="phone" labelWidth="95" borderBottom>
            <u--input v-model="userInfo.phone" type="number" maxlength="11" placeholder="请输入手机号" border="none"></u--input>
          </u-form-item>
          <u-form-item label="身份证号" prop="card" labelWidth="95" borderBottom>
            <u--input v-model="userInfo.card" maxlength="18" placeholder="请输入身份证号" border="none"></u--input>
          </u-form-item>
          <u-form-item label="单位名称" prop="unit" labelWidth="95" borderBottom>
            <u--input v-model="userInfo.unit" placeholder="请输入单位名称" border="none"></u--input>
          </u-form-item>
          <u-form-item label="参会身份" prop="identity" labelWidth="95" borderBottom>
            <view @click="Identity">
              <u--input v-model="userInfo.identity" disabled disabledColor="f2f2f2" placeholder="请选择参会身份" border="none"></u--input>
            </view>

          </u-form-item>
        </u--form>
      </view>
      <view class="btm">
        <view class="price">￥{{userInfo.price}}</view>
        <view class="submit" @click="submit">提交报名</view>
      </view>

      <u-action-sheet :actions="list" :title="title" :closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectClick" @close="close" :show="show"></u-action-sheet>
    </view>

    <view>
      <u-modal :show="showTile" title="提示" :content='content' confirmText="我知道了" @confirm="confirm"></u-modal>
    </view>
  </view>

</template>

<script>
import {
  add,
  grouping
} from '../../api/user'

export default {
  data() {
    return {
      userList: {},
      userInfo: {
        name: "",
        phone: "",
        card: "",
        unit: "",
        identity: "",
        price: 0,
      },

      title: "请选择你的参会身份",
      list: [],
      show: false,
      showTile: false,
      content: ''
    };
  },
  onLoad(options) {
    this.getGrouping()
  },
  methods: {
    async getGrouping() {
      await grouping().then(res => {
        console.log(res, '参会身份');
        if (res.status == 200) {
          this.list = res.data
        } else {
          uni.showToast({
            title: '暂未设置参会身份',
            icon: 'none'
          })
        }
      })
    },
    Identity() {
      console.log(1111);
      this.show = true
    },

    close() {
      this.show = false
    },

    selectClick(item) {
      console.log(item)
      this.userInfo.price = item.price
      this.userInfo.identity = item.name
      this.uuid = item.id
      // this.show = false
    },
    submit() {
      var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;

      var idCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;



      if (this.userInfo.name == '') {
        uni.showToast({
          title: '请输入参会姓名',
          icon: 'none'
        })
      } else if (this.userInfo.phone == '') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      } else if (this.userInfo.phone.length < 11) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      } else if (!reg.test(this.userInfo.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
      } else if (this.userInfo.card == '') {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        })
      } else if (this.userInfo.card.length < 18) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        })
      } else if (!idCard.test(this.userInfo.card)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        })
      } else if (this.userInfo.unit == '') {
        uni.showToast({
          title: '请输入单位名称',
          icon: 'none'
        })
      } else if (this.userInfo.identity == '') {
        uni.showToast({
          title: '请选择参会身份',
          icon: 'none'
        })
      } else {
        console.log(111);
        this.getAdd()
      }
    },

    async getAdd() {
      // uni.navigateTo({
      //   url: '/pages/index/index'
      // })


      await add({
        uid: uni.getStorageSync("uid"),
        username: this.userInfo.name,
        tel: this.userInfo.phone,
        idcard: this.userInfo.card,
        unitname: this.userInfo.unit,
        standing: this.userInfo.identity,
      }).then(res => {
        console.log(res, '提交信息');
        if (res.status == 200) {
          var orderInfo = res.data.jsConfig
          var orderId = res.data.order_id
          console.log(orderInfo, '支付参数支付参数');
          // 开始支付
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: orderInfo.timeStamp,
            nonceStr: orderInfo.nonceStr,
            package: orderInfo.package,
            signType: 'MD5',
            paySign: orderInfo.paySign,
            success: function (res) {

              console.log('success:' + JSON.stringify(res));
              uni.showToast({
                title: '报名成功啦 ≡▔﹏▔≡',
                duration: 1000,
              })
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/weight/weight?id=' + orderId
                })
              }, 2000)

            },
            fail: function (err) {
              console.log('fail:' + JSON.stringify(err));

              uni.showToast({
                title: '报名取消啦 ≡▔﹏▔≡',
                icon: 'none',
                duration: 1000,
              })
            }
          })
        } else if (res.status == 466) {
          this.showTile = true
          this.content = res.msg
        } else if (res.status == 488) {
          this.showTile = true
          this.content = res.msg
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'error',
            duration: 2000
          })
        }

      })
    },
    confirm() {
      this.showTile = false
    }
  },
};
</script>
<style>
page {
  background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.content {
  .picture {
    margin: 20rpx;

    height: 350rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .information {
    margin: 20rpx;
    padding: 25rpx;
    opacity: 1;
    border-radius: 9.31px;
    background: #ffffff;
    box-shadow: inset 1px 1px 0px #ffffff;
    backdrop-filter: blur(40px);
  }

  .btm {
    position: fixed;
    bottom: 0;
    width: 100%;

    height: 110rpx;
    background: #fff;

    padding-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .price {
      color: #e62222;
      font-size: 48rpx;
      padding-left: 40rpx;
    }

    .submit {
      width: 186px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      opacity: 1;
      border-radius: 1000px;
      background: linear-gradient(141.96deg, #d269ff 0%, #7d63ff 100%);
      margin-right: 50rpx;

      color: #ffffff;
    }
  }
}
</style>